<template>
	<view class="container">
<!-- 		<uni-section title="自定义校验规则" type="line"> -->
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="customForm" :rules="customRules" label-position="top" :modelValue="registrationFormData">
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="registrationFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="主播名" required name="age">
						<uni-easyinput v-model="registrationFormData.age" placeholder="请输入主播名" />
					</uni-forms-item>
					<uni-forms-item label="电话" required name="telephone">
						<uni-easyinput type="number"  v-model="registrationFormData.telephone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="行业经历"  name="industryExperience">
						<uni-easyinput type="textarea" v-model="registrationFormData.industryExperience" placeholder="过往行业经历,其他平台账号粉丝数和作品数" />
					</uni-forms-item>
					<uni-forms-item label-width="150" label="第一赛道选择" required name="firstTrack">
						<uni-data-checkbox v-model="registrationFormData.firstTrack" :localdata="racetracks" />
					</uni-forms-item>
					<uni-forms-item label="作品名" required name="title">
						<uni-easyinput v-model="registrationFormData.firstTitle" placeholder="请输入作品名" />
					</uni-forms-item>
					
					<uni-forms-item label-width="150" label="第二赛道选择(选填)" name="secondTrack">
						<uni-data-checkbox multiple max="1"  v-model="registrationFormData.secondTrack" :localdata="racetracks" />
					</uni-forms-item>
					<uni-forms-item  label-width="250" label="第二赛道作品名(选填)" name="secondTitle">
						<uni-easyinput v-model="registrationFormData.secondTitle" placeholder="请输入作品名" />
					</uni-forms-item>
				</uni-forms>
				<button style="margin-top: 50rpx; margin-bottom: 80rpx;" type="primary" @click="submit('customForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import singUp from "@/api/singUp.js"
	export default {
		data() {
			return {
				tokenOpenid:"",
				registrationId:0,
				// 参赛报名表单
				registrationFormData: {
					name: '',
					age: '',
					telephone:'',
					title:[],
					industryExperience:'',
					firstTrack: 0,
					secondTrack:[]
				},
				// 自定义表单校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					},
					telephone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					firstTrack: {
						rules: [{
							required: true,
							errorMessage: '题目不能为空'
						}]
					},
					firstTrack: {
						rules: [{
							required: true,
							errorMessage: '请选择第一赛道'
						}]
					}
				},
				// 多选数据源
				racetracks: [],
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		async onLoad(e){
			//打印传递的参数
			this.registrationId = e.id
			//获取用户openid存储一下
			this.tokenOpenid = uni.getStorageSync("token_openid");
			//获取赛道信息
			await this.getRegistrationRacetrack()
			//获取此用户已经报名过的信息
			await this.userRegistrationInformation()
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			//获取赛道信息
			getRegistrationRacetrack(){
				singUp.get_registration_racetrack().then(res=>{
					const racetracks = [{}]
					res.data.forEach((item,index)=>{
						this.racetracks.push({"text":item.raceTrackName,"value":item.id})
					})
				})
			},
			userRegistrationInformation(){
				const data = {
					competitionId:this.registrationId,
					openId:this.tokenOpenid
				}
				singUp.get_user_registration_info(data).then(res=>{
					console.log(res)
					if(res.code == 200){
						let result = res.data
						this.registrationFormData.name = result[0].name
						this.registrationFormData.age = result[0].age
						this.registrationFormData.telephone = result[0].telephone
						this.registrationFormData.industryExperience = result[0].industryExperience
						this.registrationFormData.firstTitle = result[0].title
						this.registrationFormData.firstTrack = result[0].racetrack-0
						if(result[1] != null){
							this.registrationFormData.secondTrack.push(result[1].racetrack-0)
							this.registrationFormData.secondTitle = result[1].title
						}
					}
				})
			},
			onClickItem(e) {
				this.current = e.currentIndex
			},
			add() {
				this.dynamicLists.push({
					label: '域名',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					res.competitionId = this.registrationId
					res.openId = this.tokenOpenid
					let racetrack = []
					racetrack.push(res.firstTrack)
					if(res.firstTrack == res.secondTrack[0]){
						uni.showToast({
						    title: '请勿选择同一个赛道',
							icon:'error',
						    duration: 2000
						});
						return
					}
					if(res.secondTrack.length != 0){
						console.log("选择了第二赛道")
						racetrack.push(res.secondTrack[0])
						if(this.registrationFormData.secondTitle == ""){
							console.log()
							uni.showToast({
							    title: '请填写第二赛道作品名称',
								icon:'error',
							    duration: 2000
							});
							return
						}else{
							res.title2=this.registrationFormData.secondTitle
						}
					}
					res.racetrack = racetrack
					res.title1=this.registrationFormData.firstTitle

					singUp.submit_registration_form(res).then(res=>{
						if(res.code == 200){
							uni.showToast({
								title: `提交成功`,
								duration: 2000
							})
							//跳转到上传音频页面
							uni.navigateTo({
								url:"../upload/upload?id="+this.registrationId
							})
						}else{
							uni.showToast({
								title: `提交失败`,
								icon:'none',
								duration: 2000
							})
							uni.navigateBack();
						}
					})

				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
